<template>
  <div class="medical-situation">
    <div class="content-wrapper">
      <div v-if="loading" class="loading-overlay">
        <i class="el-icon-loading"></i>
        <p>正在加载数据...</p>
      </div>
      <div class="search-bar">
        <el-date-picker
          v-model="selectedDate"
          type="date"
          placeholder="选择日期"
          format="yyyy-MM-dd"
          value-format="timestamp"
          @change="handleDateChange"
        ></el-date-picker>
        <el-input
          v-model="searchName"
          placeholder="请输入姓名搜索"
          class="search-input"
          @input="handleNameSearch"
          clearable
        >
          <i slot="prefix" class="el-icon-search"></i>
        </el-input>
        <el-input
          v-model="searchClass"
          placeholder="请输入班级搜索"
          class="search-input"
          @input="handleClassSearch"
          clearable
        >
          <i slot="prefix" class="el-icon-school"></i>
        </el-input>
      </div>

      <div class="medical-records-container">
        <div class="medical-records">
        <el-table
          :data="processedRecords"
          style="width: 100%"
          :header-cell-style="{ fontSize: '16px' }"
          :row-class-name="tableRowClassName"
          :cell-style="{ borderColor: '#68d8fe' }"
          border
          class="custom-table"
        >
        <el-table-column prop="日期" label="日期" width="250">
          <template slot-scope="scope">
            <template v-if="scope.row.isDateDivider">
              <div class="date-header">
                {{ scope.row.displayDate }}
                <span class="date-count">({{ scope.row.count }}人)</span>
              </div>
            </template>
            <template v-else>
              {{ formatExcelDate(scope.row.日期) }}
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="姓名" label="姓名" width="140"></el-table-column>
        <el-table-column prop="班级" label="班级" width="120"></el-table-column>
        <el-table-column prop="专业" label="专业" width="180"></el-table-column>
        <el-table-column prop="病因" label="病因" width="290"></el-table-column>
        <el-table-column prop="是否住院" label="是否住院" width="120" align="center">
          <template slot-scope="scope">
            <span v-if="!scope.row.isDateDivider" class="hospitalization-status">{{ scope.row.是否住院 }}</span>
          </template>
        </el-table-column>
        </el-table>
      </div>
      </div>
    </div>
  </div>
</template>

<script>
import drawMixin from "../utils/drawMixin"

export default {
  mixins: [drawMixin],
  name: 'MedicalSituation',
  data() {
    return {
      medicalRecords: [],
      selectedDate: '',
      searchName: '',
      searchClass: '', // 添加班级搜索字段
      loading: false
    }
  },
  computed: {
    filteredRecords() {
      let records = this.medicalRecords

      // 按日期筛选
      if (this.selectedDate) {
        // 将选择的时间戳转换为本地日期字符串
        const selectedDate = new Date(this.selectedDate)
        const selectedDateStr = `${selectedDate.getFullYear()}-${String(selectedDate.getMonth() + 1).padStart(2, '0')}-${String(selectedDate.getDate()).padStart(2, '0')}`

        records = records.filter(record => {
          // 安全地获取记录的日期
          if (!record.日期) return false;

          let recordDateStr;

          // 如果是数字（Excel日期格式）
          if (typeof record.日期 === 'number' && !isNaN(record.日期)) {
            const date = new Date((record.日期 - 25569) * 86400 * 1000);
            if (isNaN(date.getTime())) return false; // 日期无效
            recordDateStr = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
          }
          // 如果是字符串，尝试解析
          else if (typeof record.日期 === 'string') {
            // 尝试使用我们的formatExcelDate方法格式化
            recordDateStr = this.formatExcelDate(record.日期);
            // 如果返回的是原始字符串且不符合日期格式，则跳过
            if (recordDateStr === record.日期 && !recordDateStr.match(/^\d{4}-\d{2}-\d{2}$/)) {
              return false;
            }
          } else {
            return false; // 无法处理的日期类型
          }

          return recordDateStr === selectedDateStr;
        })
      }

      // 按姓名搜索
      if (this.searchName && this.searchName.trim()) {
        records = records.filter(record =>
          record.姓名.includes(this.searchName.trim())
        )
      }

      // 按班级搜索
      if (this.searchClass && this.searchClass.trim()) {
        const searchClassTrimmed = this.searchClass.trim();
        records = records.filter(record => {
          // 将班级转为字符串进行比较，以防班级是数字类型
          const classStr = String(record.班级 || '');

          // 精确匹配班级数字，避免"1班"和"10班"混淆
          if (searchClassTrimmed.match(/^\d+$/)) {
            // 如果搜索条件是纯数字，则进行精确匹配
            const classNum = classStr.match(/\d+/);
            if (classNum) {
              // 如果班级包含数字，则判断数字是否相等
              return classNum[0] === searchClassTrimmed;
            }
            return false;
          } else {
            // 如果搜索条件不是纯数字，则使用包含关系进行模糊匹配
            return classStr.includes(searchClassTrimmed);
          }
        });
      }

      return records
    },

    // 处理数据，在不同日期之间添加分隔行
    processedRecords() {
      const records = [...this.filteredRecords];
      if (records.length === 0) return [];

      // 按日期排序（降序，新日期在前）
      records.sort((a, b) => b.日期 - a.日期);

      // 按日期分组并计算每天的记录数
      const recordsByDate = {};
      records.forEach(record => {
        const recordDate = this.formatExcelDate(record.日期);
        if (!recordsByDate[recordDate]) {
          recordsByDate[recordDate] = {
            date: recordDate,
            excelDate: record.日期,
            records: []
          };
        }
        recordsByDate[recordDate].records.push(record);
      });

      // 将分组后的数据转换为最终结果
      const result = [];
      Object.values(recordsByDate).forEach(group => {
        // 添加日期分隔行，包含该日期的记录数
        result.push({
          isDateDivider: true,
          displayDate: group.date,
          count: group.records.length,
          日期: group.excelDate
        });

        // 添加该日期的所有记录
        group.records.forEach(record => {
          result.push(record);
        });
      });

      // 更新今日就医人数
      this.updateTodayMedicalCount();

      return result;
    },

    // 获取目标日期的就医人数
    todayMedicalCount() {
      const targetDateStr = '2025-04-09';

      // 过滤出目标日期的记录
      return this.medicalRecords.filter(record => {
        if (!record.日期) return false;

        let recordDateStr;

        // 如果是数字（Excel日期格式）
        if (typeof record.日期 === 'number' && !isNaN(record.日期)) {
          const date = new Date((record.日期 - 25569) * 86400 * 1000);
          if (isNaN(date.getTime())) return false; // 日期无效
          recordDateStr = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
        }
        // 如果是字符串，尝试解析
        else if (typeof record.日期 === 'string') {
          // 尝试使用我们的formatExcelDate方法格式化
          recordDateStr = this.formatExcelDate(record.日期);
          // 如果返回的是原始字符串且不符合日期格式，则跳过
          if (recordDateStr === record.日期 && !recordDateStr.match(/^\d{4}-\d{2}-\d{2}$/)) {
            return false;
          }
        } else {
          return false; // 无法处理的日期类型
        }

        return recordDateStr === targetDateStr;
      }).length;
    }
  },
  methods: {
    // 格式化日期显示
    formatExcelDate(dateValue) {
      // 如果是数字，则当作 Excel 日期处理
      if (typeof dateValue === 'number' && !isNaN(dateValue)) {
        const date = new Date((dateValue - 25569) * 86400 * 1000);
        if (isNaN(date.getTime())) {
          return '无效日期'; // 日期无效
        }
        return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
      }

      // 如果是字符串，尝试直接解析
      if (typeof dateValue === 'string') {
        // 尝试解析各种可能的日期格式
        const date = new Date(dateValue);
        if (!isNaN(date.getTime())) {
          return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
        }

        // 尝试处理中文日期格式，如"2023年10月20日"
        const chineseDatePattern = /(\d{4})年(\d{1,2})月(\d{1,2})(日)?/;
        const chineseMatch = dateValue.match(chineseDatePattern);
        if (chineseMatch) {
          const year = parseInt(chineseMatch[1]);
          const month = parseInt(chineseMatch[2]);
          const day = parseInt(chineseMatch[3]);
          return `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
        }

        // 如果是其他格式，直接返回原始字符串
        return dateValue;
      }

      // 如果不是数字也不是字符串，返回默认值
      return '未知日期';
    },

    // 处理日期变化
    handleDateChange() {
      // 日期变化时已经通过计算属性自动更新了filteredRecords，无需额外操作
    },

    // 处理姓名搜索
    handleNameSearch() {
      // 姓名搜索时已经通过计算属性自动更新了filteredRecords，无需额外操作
      console.log('按姓名搜索:', this.searchName);
    },

    // 处理班级搜索
    handleClassSearch() {
      // 班级搜索时已经通过计算属性自动更新了filteredRecords，无需额外操作
      console.log('按班级搜索:', this.searchClass);
    },

    // 设置行的类名
    tableRowClassName({ row }) {
      if (row.isDateDivider) {
        return 'date-divider-row';
      }
      return '';
    },

    // 更新今日就医人数
    updateTodayMedicalCount() {
      // 指定查找2025年4月9日的记录
      const targetDateStr = '2025-04-09';

      // 过滤出目标日期的记录
      const targetCount = this.medicalRecords.filter(record => {
        if (!record.日期) return false;

        let recordDateStr;

        // 如果是数字（Excel日期格式）
        if (typeof record.日期 === 'number' && !isNaN(record.日期)) {
          const date = new Date((record.日期 - 25569) * 86400 * 1000);
          if (isNaN(date.getTime())) return false; // 日期无效
          recordDateStr = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
        }
        // 如果是字符串，尝试解析
        else if (typeof record.日期 === 'string') {
          // 尝试使用我们的formatExcelDate方法格式化
          recordDateStr = this.formatExcelDate(record.日期);
          // 如果返回的是原始字符串且不符合日期格式，则跳过
          if (recordDateStr === record.日期 && !recordDateStr.match(/^\d{4}-\d{2}-\d{2}$/)) {
            return false;
          }
        } else {
          return false; // 无法处理的日期类型
        }

        return recordDateStr === targetDateStr;
      }).length;

      // 尝试更新主页面上的今日就医人数
      try {
        // 尝试直接更新主页面上的今日就医人数
        if (window.parent && window.parent.updateMedicalCount) {
          window.parent.updateMedicalCount(targetCount);
        } else {
          // 尝试通过事件总线更新
          this.$root.$emit('update-medical-count', targetCount);

          // 如果在同一个应用实例中，尝试直接访问组件
          if (this.$root.$refs && this.$root.$refs.centerRef) {
            this.$root.$refs.centerRef.updateMedicalCount(targetCount);
          } else if (this.$root.$children && this.$root.$children[0] &&
                     this.$root.$children[0].$refs && this.$root.$children[0].$refs.centerRef) {
            this.$root.$children[0].$refs.centerRef.updateMedicalCount(targetCount);
          }

          // 直接在控制台输出，便于调试
          console.log('4月9日就医人数:', targetCount);
        }
      } catch (error) {
        console.error('更新就医人数失败:', error);
      }
    },

    // 读取CSV文件数据
    async fetchMedicalRecords() {
      this.loading = true
      try {
        // 读取CSV文件
        const response = await fetch('/data/gerendangan/jiankang/988.csv')
        const csvText = await response.text()

        // 解析CSV数据
        this.medicalRecords = this.parseCSV(csvText)
        this.loading = false
      } catch (error) {
        console.error('Error loading CSV file:', error)
        this.loading = false
        // 显示错误提示
        this.$message.error('加载数据失败，请检查文件是否存在')
      }
    },

    // 解析CSV文件
    parseCSV(csvText) {
      // 分行处理
      const lines = csvText.split('\n')
      if (lines.length <= 1) return []

      // 获取头部列名
      const headers = lines[0].split(',').map(header => header.trim())

      // 处理数据行
      const records = []
      for (let i = 1; i < lines.length; i++) {
        const line = lines[i].trim()
        if (!line) continue // 跳过空行

        const values = line.split(',')
        if (values.length < headers.length) continue // 跳过不完整的行

        const record = {}
        headers.forEach((header, index) => {
          // 处理日期字段
          if (header === '日期' && values[index]) {
            const dateValue = values[index].trim();

            // 尝试处理不同的日期格式
            let parsedDate = null;

            // 1. 尝试 YYYY-MM-DD 格式
            const isoPattern = /^(\d{4})-(\d{1,2})-(\d{1,2})$/;
            const isoMatch = dateValue.match(isoPattern);
            if (isoMatch) {
              const year = parseInt(isoMatch[1]);
              const month = parseInt(isoMatch[2]) - 1; // 月份从0开始
              const day = parseInt(isoMatch[3]);
              parsedDate = new Date(year, month, day);
            }

            // 2. 尝试中文日期格式，如 "2023年10月20日"
            if (!parsedDate) {
              const chineseDatePattern = /(\d{4})年(\d{1,2})月(\d{1,2})(日)?/;
              const chineseMatch = dateValue.match(chineseDatePattern);
              if (chineseMatch) {
                const year = parseInt(chineseMatch[1]);
                const month = parseInt(chineseMatch[2]) - 1;
                const day = parseInt(chineseMatch[3]);
                parsedDate = new Date(year, month, day);
              }
            }

            // 3. 尝试简单的月日格式，如 "4月20日"
            if (!parsedDate) {
              const shortChineseDatePattern = /(\d{1,2})月(\d{1,2})(日)?/;
              const shortChineseMatch = dateValue.match(shortChineseDatePattern);
              if (shortChineseMatch) {
                const currentYear = new Date().getFullYear();
                const month = parseInt(shortChineseMatch[1]) - 1;
                const day = parseInt(shortChineseMatch[2]);
                parsedDate = new Date(currentYear, month, day);
              }
            }

            // 4. 如果上述格式都不匹配，尝试直接解析
            if (!parsedDate) {
              parsedDate = new Date(dateValue);
              if (isNaN(parsedDate.getTime())) {
                // 如果解析失败，直接保存原始字符串
                record[header] = dateValue;
                return;
              }
            }

            // 如果成功解析日期，转换为Excel日期格式
            if (parsedDate && !isNaN(parsedDate.getTime())) {
              // 转换为Excel日期格式（Excel中的日期是从1900年开始的天数）
              const excelDate = 25569 + parsedDate.getTime() / (86400 * 1000);
              record[header] = excelDate;
            } else {
              // 如果解析失败，保存原始字符串
              record[header] = dateValue;
            }
          } else {
            // 非日期字段直接保存
            record[header] = values[index];
          }
        })

        records.push(record)
      }

      return records
    }
  },
  created() {
    this.fetchMedicalRecords()
  },
  mounted() {
    // 触发重新计算大屏缩放比例
    setTimeout(() => {
      this.calcRate()
    }, 100)
  }
}
</script>

<style scoped lang="scss">
.medical-situation {
  color: #d3d6dd;
  width: 100%;
  height: 100%;
  position: relative;
  padding: 20px;
  background-image: url("~@/assets/pageBg.png");
  background-size: cover;
  background-position: center center;

  .loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(29, 33, 39, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;

    p {
      margin-top: 10px;
      color: #fff;
    }
  }

  .search-bar {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    justify-content: center;
    background-color: rgba(29, 33, 39, 0.7);
    padding: 15px;
    border-radius: 10px;
    width: 85%;
    max-width: 1100px;
    margin: 0 auto 20px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(104, 216, 254, 0.2);

    .search-input {
      width: 180px;
      margin-left: 10px;
    }

    :deep(.el-input__inner),
    :deep(.el-date-editor.el-input) {
      background-color: rgba(45, 50, 62, 0.8);
      border: 1px solid rgba(104, 216, 254, 0.3);
      color: #fff;
    }

    :deep(.el-input__icon) {
      color: rgba(104, 216, 254, 0.8);
    }
  }

  .medical-records-container {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .medical-records {
    width: 85%;
    max-width: 1100px;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.6), 0 0 5px rgba(104, 216, 254, 0.3);
    border-radius: 10px;
    overflow: hidden;
    margin-top: 10px;
    height: calc(100vh - 180px);
    position: relative;
    display: flex;
    flex-direction: column;
  }

  :deep(.el-table) {
    background-color: transparent;
    height: 100%;
    border: 2px solid #68d8fe;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(104, 216, 254, 0.3);

    th {
      background: linear-gradient(to bottom, #2c3e50, #1d2127) !important;
      border-bottom: 2px solid #68d8fe;
      border-right: 1px solid #68d8fe;
      font-weight: bold;
      padding: 15px 0;
      font-size: 16px !important;
      color: #68d8fe !important;
    }

    td {
      background-color: rgba(29, 33, 39, 0.8);
      border-bottom: 1px solid #68d8fe;
      border-right: 1px solid #68d8fe;
      color: #fff;
      padding: 12px 0;
      transition: background-color 0.2s ease;
    }

    .date-divider-row {
      background-color: #2c3e50 !important;

      td {
        background: linear-gradient(to right, #2c3e50, #34495e, #2c3e50) !important;
        color: #68d8fe;
        font-weight: bold;
        text-align: center;
        font-size: 16px;
        padding: 10px 0;
        letter-spacing: 1px;
        border-bottom: 1px solid #68d8fe;
        border-right: 1px solid #68d8fe;
      }

      &:hover > td {
        background: linear-gradient(to right, #34495e, #3d5871, #34495e) !important;
      }
    }

    .el-table__row:hover > td {
      background-color: rgba(45, 50, 62, 0.9) !important;
    }

    .cell {
      line-height: 24px;
    }

    .date-header {
      font-weight: bold;
      color: #68d8fe;
      font-size: 16px;
      display: flex;
      justify-content: center;
      align-items: center;

      .date-count {
        margin-left: 10px;
        font-size: 14px;
        color: #fff;
        background-color: rgba(104, 216, 254, 0.2);
        padding: 2px 8px;
        border-radius: 12px;
        border: 1px solid rgba(104, 216, 254, 0.4);
      }
    }

    .hospitalization-status {
      display: inline-block;
      padding: 4px 12px;
      border-radius: 4px;
      background-color: rgba(104, 216, 254, 0.15);
      border: 1px solid rgba(104, 216, 254, 0.4);
      min-width: 40px;
      text-align: center;
    }

    .el-table__header-wrapper {
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      overflow: hidden;
    }

    .el-table__body-wrapper {
      border-bottom-left-radius: 8px;
      border-bottom-right-radius: 8px;
      overflow-y: auto !important;
      overflow-x: hidden;
      max-height: calc(100vh - 240px);
      scrollbar-width: thin;
      scrollbar-color: #68d8fe #1d2127;

      &::-webkit-scrollbar {
        width: 8px;
      }

      &::-webkit-scrollbar-track {
        background: #1d2127;
        border-radius: 4px;
      }

      &::-webkit-scrollbar-thumb {
        background-color: #68d8fe;
        border-radius: 4px;
        border: 2px solid #1d2127;
      }
    }

    // Remove last column's right border
    th:last-child, td:last-child {
      border-right: none;
    }

    // Fix border issues
    &::before {
      display: none;
    }

    .el-table__fixed::before,
    .el-table__fixed-right::before {
      display: none;
    }

    // Ensure all cells have proper borders
    .el-table__row td {
      border-right: 1px solid #68d8fe !important;
    }

    .el-table__row td:last-child {
      border-right: none !important;
    }

    // Fix table border patches
    .el-table__border-left-patch,
    .el-table__border-right-patch {
      background-color: #68d8fe;
    }
  }
}
</style>